<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        table {
            border-collapse: collapse;
            margin-top: 30px;
            margin-bottom: 30px;
            width: 600px;
            text-align: center;
        }
        td,th{
            width: 120px;
        }
        button {
            border: 0;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th><button class="all">全选</button></th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" name="" class="getGoods"> </td>
            <td>电脑</td>   
            <td class="price">200</td>
            <td>
                <button class="jian">-</button>
                <span>1</span>
                <button class="add">+</button>
            </td>
            <td class="total">200</td>
            <td>删除</td>
        </tr>
        <tr>
            <td><input type="checkbox" name=""  class="getGoods"> </td>
            <td>手机</td>
            <td class="price">100</td>
            <td>
                <button class="jian">-</button>
                <span>1</span>
                <button class="add">+</button>
            </td>
            <td class="total">100</td>
            <td>删除</td>
        </tr>
    </table>
    <div>
        <span>总计：</span>
        <span class="sum">0</span>
    </div>

    <script>
       function displaySum() {
            let checkComputer = $($('.getGoods')[0]).prop('checked');
            let checkPhone =  $($('.getGoods')[1]).prop('checked');

            let totalComputer = +$($('.total')[0]).text();
            let totalPhone =  +$($('.total')[1]).text();
            
            let total = 0;
            if(checkComputer) {
                total += totalComputer;
            }
            if(checkPhone) {
                total += totalPhone;
            }
            $('.sum').text(total);
       }       
       $('.add').click(function() {
            let num = +$(this).prev().text();
            num++;
            $(this).prev().text(num);
            // 计算价格
            let price = +$(this).parent().prev().text();
            $(this).parent().next().text(price*num);      

            displaySum();
       })

       $('.jian').click(function() {
            let num = +$(this).next().text();
            if(num > 0)
                num--;
            $(this).next().text(num);
            // 计算价格
            let price = +$(this).parent().prev().text();
            $(this).parent().next().text(price*num);  

            displaySum();
       })

       $(".getGoods").click(()=> {
            displaySum();
       });

    </script>

</body>

</html>